<template>
  <div >
    <el-dialog
      v-model="openUp"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      @close = "share_cancel()"
      width="50%"
    >
      <template #header>
        <div class="customerTitle2">地址更新<span class="title1">订单编号:{{uidList && uidList.uid}}</span></div>
      </template>
      <div>

        <el-form
          label-width="105px"
          ref="formDate"
          :model="formList"
          :rules="rules"
        >
          <el-form-item label="收货地址" prop="shipping_address">
            <el-cascader
              placeholder=" "
              v-model="formList.shipping_address"
              :options="areaOption"
              style="width:100%;display: inline-block"
              :props="{ value: 'name', label: 'name' }"
            >
              <template #default="{ data }">
                <span>{{ data.name }}</span>
              </template>
            </el-cascader>
            <el-input style="margin-top: 10px" v-model.trim="formList.address" />
          </el-form-item>
          <el-form-item label="联系人" prop="contact_user">
            <el-input v-model.trim="formList.contact_user" />
          </el-form-item>
          <el-form-item label="联系电话" prop="contact_tel">
            <el-input v-model.trim="formList.contact_tel" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer customerDialog3">
            <el-button @click="share_cancel()">取消</el-button>
          <el-button type="primary"  @click="share_save(formDate)">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import lodash from 'lodash'
import {ElMessage, FormRules} from "element-plus";
import Button from "/@/views/vab/form/button.vue";
import {orderConfirmReceipt} from "/@/api/dms/order/confirm";
import {ref} from "vue";
import {areaOptions} from "/@/views/corpManagement/corpCustomers/tools";
import {orderBatchUpdate} from "/@/api/dms/order/batch";
const areaOption = ref<any>([])
const openUp = ref<any>(false)
const formDate = ref<any>(undefined)
const formList = ref({
  address:'',
  shipping_address:[],
  contact_user:'',
  contact_tel:'',
})
//******表单验证*******
const rules = ref<any>({
  shipping_address: [{ required: true, message: '请选择收货地址', trigger: 'change' }],
  contact_user: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  contact_tel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
})
const $emits = defineEmits(['addressSubmit'])
const uidList = ref<any>(undefined)
const share_save = lodash.debounce(async (value:any)=>{
  await value.validate((valid: any, fields: any) => {
    if(valid){
      orderBatchUpdate({uid:uidList.value.uid,...formList.value,shipping_address:formList.value.shipping_address.toString()}).then((data:any)=>{
        if(data.code == 200){
          openUp.value = false
          formList.value = {
            address:'',
            shipping_address:[],
            contact_user:'',
            contact_tel:'',
          }
          ElMessage.success(`提交成功`)
          $emits('addressSubmit',2)
        }
      })
    }
  })
},500)

const share_cancel = (formEl:any='')=>{
  openUp.value= false
  formList.value ={
    address:'',
    shipping_address:[],
    contact_user:'',
    contact_tel:'',
  }
}
onMounted(async ()=>{
  // 获取地址
  areaOption.value = await areaOptions()

})
watch(openUp,()=>{
  if(openUp.value){
    console.log(uidList.value,'777')
    formList.value ={
      address:uidList.value.address || '',
      shipping_address: uidList.value.shipping_address != "Array" && uidList.value.shipping_address.split(",")||[],
      contact_user:uidList.value.contact_user||'',
      contact_tel:uidList.value.contact_tel||'',
    }
  }
})
defineExpose(
  {
    openUp,
    uidList,
  }
)
</script>

<style lang="scss" scoped>
@import "../../index";
</style>
